<template>
  <div class="kxz-home--user">
    <section class="container" v-if="0">
      <h2 class="title">
        <i class="icon icon-gd2"></i>工单信息</h2>
      <table class="content--gd2">
        <tr>
          <th>受理中的工单</th>
          <th>逾期或快逾期工单</th>
          <th>提交待处理工单</th>
          <th>逾期或快逾期工单</th>
        </tr>
        <tr>
          <td>路人1</td>
          <td>路人1</td>
          <td>路人1</td>
          <td>路人1</td>
        </tr>
      </table>
    </section>
    <section class="container">
      <h2 class="title">
        <i class="icon icon-kh"></i>考核信息</h2>
      <table class="content--kh">
        <tr>
          <th></th>
          <th>在线时间</th>
          <th>电话量</th>
          <th>平均通话时长</th>
          <th>满意度</th>
        </tr>
        <template v-if="examMsg && examMsg.length > 0">
          <tr v-for="(item,index) in examMsg" :key="index" >
            <td>{{index | fltExDateType}}</td>
            <td v-text="item.zxsj"></td>
            <td v-text="item.zcount_y"></td>
            <td v-text="item.zcount_zscpjyjt"></td>
            <td @click="handleOpenMyd(index)"><span class="check">查看</span></td>
          </tr>
        </template>
        <template v-else>
          <tr>
            <td colspan="5">暂无记录</td>
          </tr>
        </template>
      </table>
    </section>
    <section class="container zj">
      <h2 class="title">
        <i class="icon icon-pb2"></i>质检信息
      </h2>
      <p >
        <el-date-picker
          v-model="zj.timeDur"
          type="daterange"
          @change="getZJ"
          placeholder="选择日期范围">
        </el-date-picker>
      </p>
      <table>
        <tr>
          <th v-for="(item,index) in zj.titleList" :key="index" v-text="item.label"></th>
        </tr>
        <template v-if="zj.tableData.length > 0">
          <tr v-for="(item,index) in zj.tableData" :key="index">
            <td>{{item.UserName}}</td>
            <router-link tag="td" to="/zj-lists" class="click">
              {{item.zcount_callin}}
            </router-link>
            <router-link tag="td" to="/zj-lists" class="click">
              {{item.zcount_callout}}
            </router-link>
            <td>{{item.zcount_zscpj}}</td>
            <td>{{item.pj}}</td>
            <td>{{item.da}}</td>
            <td>{{item.xiao}}</td>
            <td>{{item.num}}</td>
          </tr>
        </template>
        <tr v-if="zj.tableData.length === 0">
          <td :colspan="zj.titleList.length">暂无记录</td>
        </tr>
      </table>
    </section>
    <section class="container">
      <h2 class="title">
        <i class="icon icon-pb2"></i>排班信息</h2>
      <table class="content--pb2">
        <tr>
          <th v-for="(item, index) in ['日','一','二','三','四','五','六']" v-text="item" :key="index"></th>
        </tr>
        <tr v-for="(rowData, rowIndex) in cpuOrderInMonth" :key="rowIndex">
          <td v-for="(item, index) in rowData" :key="index">
            <template v-if="item && item.date">
              <p v-text="item.date"></p>
              <p v-if="item.type">
                <span
                  :class="`label label-${item.type === '早班' ? 'mor' : 'nig'}`"
                  v-text="item.type === '早班' ? '早班' : '晚班'"
                >
                </span>
              </p>
            </template>
          </td>
        </tr>
      </table>
    </section>
    <myd :PkfName="kfName" :PsDialog="sDialog" :PmydData="mydData" @oncloseDialog="revCloseDialog"></myd>
  </div>
</template>

<script>
import Myd from '../../../components/myd'
import { dateFormat } from 'vux'

export default {
  name: 'user',
  data() {
    const orderInMonth = this._initOrderInMonth()
    const {userName} = this.$store.getters.getUserInfo
    const nowDate = new Date()
    const ztDate = nowDate.setDate(nowDate.getDate() - 1)
    const timeDur = [ztDate,ztDate]
    return {
      // 添加参数
      zj:{
        timeDur,
        tableData:[],
        titleList:[
          {
            label:'客服姓名',
          },
          // {
          //   prop:'kf',
          //   label:'进入质检表电话量',
          // },
          {
            label:'呼入量',
          },
          {
            label:'呼出量',
          },
          {
            label:'平均通话时长',
          },
          {
            label:'平均分',
          },
          {
            label:'最高分',
          },
          {
            label:'最低分',
          },
          {
            label:'转工单数',
          },
        ],
      },
      //
      kfName:userName,
      sDialog: false,
      orderInMonth,
      examMsg:[],
      mydData: {}
    }
  },
  computed: {
    cuUserInfo(){
      return this.$store.getters.getUserInfo
    },
    cpuOrderInMonth() {
      const odList = this.orderInMonth
      const initOdList = this._initOrderInMonth()
      if (odList.length > 5) {
        initOdList.forEach((rowData, rIndex) => {
          rowData.forEach((sItem, sIndex) => {
            if(sItem && sItem.date && odList[sItem.date - 1]){
              initOdList[rIndex][sIndex].type = odList[sItem.date-1].replace(/[\s]*$/,'')
            }
          })
        })
        return initOdList
      }
      return odList
    }
  },
  filters:{
    fltExDateType(val){
      switch(val){
        case 0:
          return '本日'
        case 1:
          return '本周'
        default:
          return '本月'
      }
    }
  },
  components: {
    Myd
  },
  mounted() {
    // 获取考核信息
    this.getExamMsg()

    // 获取普通人员排班信息
    this.getUserOrderInMonth()

    // 获取质检信息
    this.getZJ()
  },
  methods: {
    _datesByYM(y, m) {
      const dates = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
      if (m === 1) {
        return y % 100 !== 0 ? (y % 4 === 0 ? (dates[m] + 1) : dates[m])
          : (y % 400 === 0 ? (dates[m] + 1) : dates[m])
      }
      return dates[m]
    },
    _initOrderInMonth() {
      const dObj = new Date()
      const y = dObj.getFullYear()
      const m = dObj.getMonth() + 1
      const selFDAY = new Date(y + '-' + m + '-1')   // 选定月份的第一天日期
      const fDay = selFDAY.getDay() // 获取选定月第一天的星期
      const maxDates = this._datesByYM(selFDAY.getFullYear(), selFDAY.getMonth())
      const tmpa = [[], [], [], [], []]
      for (let i = 0, tl = tmpa.length; i < tl; i++) {
        const suba = tmpa[i]
        for (let j = 0, sl = 7; j < sl; j++) {
          if ((i === 0 && j > (fDay - 1)) || i > 0) {
            const date = (j + 1) + 7 * i - fDay
            if (date < (maxDates + 1)) {
              tmpa[i][j] = {
                date
              }
            } else {
              tmpa[i][j] = null
            }
          }
        }
      }
      return tmpa
    },
    handleOpenMyd(val){
      this.sDialog = true
      this.getMyd(val)
    },
    revCloseDialog(){
      this.sDialog = false
    },
    async getExamMsg(){
      const {sessionId} = this.$store.getters.getUserInfo
      const {data} = await this.$get(this,{
        api:'user/gerenCall.do',
        data:{
          sessionId
        }
      })
      if(data.state === 0){
        this.examMsg = data.content
      }
    },
    // 获取质检信息
    async getZJ(){
      const timeDur = this.zj.timeDur
      const {id ,userName,userGroupId} = this.cuUserInfo
      try{
        const {data} = await this.$get(this,{
          api:'ajaxapi/zjbb.do',
          data:{
            st:timeDur && dateFormat(timeDur[0], 'YYYY-MM-DD') || '',
            et:timeDur && dateFormat(timeDur[1], 'YYYY-MM-DD') || '',
            groupId:userGroupId,
            kfid:id,
            kfName:userName
          }
        })
        if(data.state === 0){
          this.zj.tableData = data.content
          return
        }
        this.$warn('ajaxapi/zjbb.do接口数据异常')
        console.log('ajaxapi/zjbb.do数据异常:',data.message)
      }catch(e){
        this.$warn('ajaxapi/zjbb.do接口响应报错')
        console.log('ajaxapi/zjbb.do响应报错:',e.message)
      }
    },
    async getMyd(val){
      const {id} = this.$store.getters.getUserInfo
      val += 2
      const {data} = await this.$get(this,{
        api:'ajaxapi/mydtj.do',
        data:{
          adminid: id,
          fff:val
        }
      })
      if(data.state === 0){
        this.mydData = data.content
      }
    },
    async getUserOrderInMonth() {
      const {id, userGroupId} = this.$store.getters.getUserInfo
      const {data} = await this.$get(this,{
        api: 'order/selectTypesInMonth.do',
        data:{
          kfid:id,
          UserGroupId:userGroupId
        }
      })
      if (data.state === 0) {
        this.orderInMonth = data.content
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  .icon {
    &.icon-pb2 {
      background-image: url(../images/icon-pb2.jpg);
    }
    &.icon-gd2 {
      background-image: url(../images/icon-gd2.png);
    }
    &.icon-kh {
      background-image: url(../images/icon-kh.png);
    }
  }
}
table {
  $bdColor: #bac2cb;
  $color: #444;
  $dftColor: #7b8897;
    &.content--gd2 {
      td {
        &:first-child {
          color: $dftColor;
        }
      }
    }
    &.content--kh {
      td {
        &:first-child {
          color: $color;
          // font-size: 18px;
          font-size: 14px;
        }
      }
    }
    &.content--pb2 {
      td {
        box-sizing: border-box;
        height: 80px;
        line-height: 28px;
        padding: 17px 0;
        font-size: 14px;
        text-align: center;
        .label {
          padding: 2px 12px;
          border-radius: 3px;
          color: #fff;
          &.label-mor {
            background: #5394fc;
          }
          &.label-nig {
            background: #ffa838;
          }
        }
      }
    }
  }
  .check{
    color:#5394fc;
    border-bottom:1px solid #5394fc;
    cursor: pointer;
  }
  // 质检信息
.zj{
  p{
    padding:20px 20px;
    border:1px solid #bac2cb;
    border-bottom:none;
  }
}
.click{
  color:#20a0ff;
  cursor:pointer;
}
</style>


